<!--主容器-->
<template>
  <div id="mainContainer" style="width: 100%;height: 100%;">
  <el-container style="width: 100%;height: 100%;">
    <!--头部-->
    <el-header style="height: 45px;padding: 0 0;" id="header">
      <el-menu  class="el-menu-demo" id="header-el-menu-demo" mode="horizontal" @select="handleSelect"
                text-color="#fff"
                active-text-color="#ffd04b">
        <el-menu-item index="1">测试平台</el-menu-item>
        <!--<el-menu-item index="2">界面管理</el-menu-item>-->
        <el-menu-item index="3" @click="lookInfo">个人中心</el-menu-item>
        <el-menu-item index="4" style="float: right" @click="exitSystem">退出</el-menu-item>
        <el-menu-item index="5" style="float: right">欢迎：{{$store.getters.user.user_nick_name}}</el-menu-item>
        <el-menu-item index="6" style="float: right;color: yellow">{{time}}</el-menu-item>
      </el-menu>
    </el-header>

    <el-container>
      <!--侧边导航栏-->
      <el-aside width="12%" id="aside" style="background-color:rgb(57,61,73)">
        <el-menu default-active="0" class="el-menu-vertical-demo" @open="handleOpen"
                 background-color="#545c64"
                 text-color="#fff"
                 active-text-color="#ffd04b"
                 style="width: 100%"
        :router="isRouter">
          <el-menu-item index="/main">
            <i class="el-icon-setting"></i>
            <span slot="title">首页</span>
          </el-menu-item>

          <template v-for="(me,n) in permission">

            <el-menu-item v-if="me.list == null" :index="me.url">
              <i class="el-icon-setting"></i>
              <span slot="title">{{me.action_name}}</span>
            </el-menu-item>


            <el-submenu v-else :index="n+''">
              <template slot="title">
                <i class="el-icon-setting"></i>
                <span slot="title">{{me.action_name}}</span>
              </template>
              <el-menu-item-group>
                <template v-for="(ite,m) in me.list">
                  <el-menu-item :index="ite.url">
                    <i class="el-icon-location"></i>
                    <span>{{ite.action_name}}</span>
                  </el-menu-item>
                </template>
              </el-menu-item-group>
            </el-submenu>

          </template>

          <!--<el-submenu index="1">-->
            <!--<template slot="title">-->
              <!--<i class="el-icon-location"></i>-->
              <!--<span slot="title">导航一</span>-->
            <!--</template>-->
            <!--<el-menu-item-group>-->
              <!--<el-menu-item index="1-1">选项1</el-menu-item>-->
              <!--<el-menu-item index="1-2">选项2</el-menu-item>-->
            <!--</el-menu-item-group>-->
          <!--</el-submenu>-->

          <!--<el-menu-item index="2">-->
            <!--<i class="el-icon-menu"></i>-->
            <!--<span slot="title">导航二</span>-->
          <!--</el-menu-item>-->

          <!--<el-menu-item index="3">-->
            <!--<i class="el-icon-setting"></i>-->
            <!--<span slot="title">导航三</span>-->
          <!--</el-menu-item>-->


        </el-menu>

      </el-aside>
      <el-container style="height:100%;">
        <!--主题内容-->
        <el-main style="height: 100%;">
          <div style="height: 800px;overflow: visible;">
            <router-view/>
          </div>
        </el-main>
        <!--底部-->
        <el-footer style="height: 35px;">
          <div style="text-align: left;color: white;">伟伟 毕业设计项目<label>在线考试管理系统</label> 2020-5-15</div>
        </el-footer>
      </el-container>
    </el-container>
  </el-container>
    <edit-user-info v-if="isShowEditDialog" :isShowEditDialog="isShowEditDialog" :userData="userData" @editUserInfoClose="closeDialog"></edit-user-info>
  </div>
</template>

<script>
  import {store} from '@/vuex/store'
  import {getPermission} from '@/api/permission'
  import {getUserById,userExitSystem} from '@/api/user'

  import editUserInfo from '../super/user/component/EditUserInfo.vue'
  import ElFormItem from "../../../node_modules/element-ui/packages/form/src/form-item";
  export default{
    components:{
      ElFormItem,
      editUserInfo
    },
    store,
    data(){
          return {
             permission:null,
             isRouter:true,
             userData:{},
            isShowEditDialog:false,
            time:"",
            interval:null
          }
      },
    methods:{
      handleOpen(key, keyPath) {
        //console.log(key, keyPath);
      },

      handleSelect(key,keyPath){
        //console.log(key, keyPath);
      },

      //查看个人信息
      lookInfo(){
        getUserById().then(res=>{
            if(res.code == 200){
                this.userData = res.data;
                this.userData.updateType = "zx";
                this.isShowEditDialog = true;
            }
        })
      },

      closeDialog(){
        this.isShowEditDialog = false;
      },

      //退出系统
      exitSystem(){
        userExitSystem().then(res=>{
            if(res.code == 200){
              this.$router.push({path:"/"})
            }
        })
      },

      getNowTime(){
        let $this = this;
        this.interval = setInterval(function () {
          let date=new Date();

          let year=date.getFullYear();
          let month=date.getMonth();
          let day=date.getDate();

          let hour=date.getHours();
          let minute=date.getMinutes();
          let second=date.getSeconds();

          //这样写显示时间在1~9会挤占空间；所以要在1~9的数字前补零;
          if (hour<10) {
            hour='0'+hour;
          }
          if (minute<10) {
            minute='0'+minute;
          }
          if (second<10) {
            second='0'+second;
          }
          var w=date.getDay();//获取星期
          $this.time = year+'-'+month+'-'+day+' '+hour+':'+minute+':'+second;
        },1000);
      }

    },
    created () {
      if (sessionStorage.getItem("user") ) {   //页面加载前读取sessionStorage里的状态信息
        //this.$store.replaceState(Object.assign({}, this.$store.getters.user,JSON.parse(sessionStorage.getItem("user"))))
        this.$store.commit('handleUser',JSON.parse(sessionStorage.getItem("user")));
        this.getNowTime();
      }
    },
    mounted(){

      //获取登录用户的操作权限
      getPermission({"id":this.$store.getters.user.id}).then(res=>{
          if(res.code == 200){
              this.permission = res.data;
          }else{

          }
      });
    },

    beforeDestroy(){
        clearInterval( this.interval);
    }
  }
</script>
<style>

  #mainContainer{
    height: 100%;
  }

  #mainContainer .el-container.is-vertical{
    height: 100%;
  }
  #mainContainer .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 40px;
  }

  #mainContainer .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: left;
    line-height: 200px;
  }

  #mainContainer .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }

  #mainContainer .el-container:nth-child(5) .el-aside,
  #mainContainer .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  #mainContainer .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }

  /*头部*/
  #mainContainer #header-el-menu-demo{
    height: 100%;
    line-height: 100%;
    background-color: rgb(35, 38, 46);
  }

  #mainContainer .el-menu--horizontal>.el-submenu .el-submenu__title{
    height: 45px;
    line-height: 45px;
    float: right;
    color: black;
	background-color: rgb(35, 38, 46);
  }

  #mainContainer .el-menu--horizontal>.el-menu-item {
    float: left;
    height: 45px;
    line-height: 45px;
    color: black;
	background-color: rgb(35, 38, 46);
  }

  #mainContainer .el-menu--horizontal ul{
    padding:0px;
  }


  /*侧边导航*/
  #mainContainer #aside .el-menu-vertical-demo .el-submenu .el-submenu__title{
     /*padding-right: 48px;*/
	 background-color:rgb(57,61,73) !important;
    font-size: 12px !important;
  }

  #mainContainer #aside .el-menu-vertical-demo .el-submenu .el-submenu__title .el-icon-setting span{
  }

  #mainContainer #aside .el-menu-vertical-demo .el-submenu .el-menu .el-menu-item-group .el-menu-item-group__title{
    padding: 0px;
  }

  #mainContainer #aside .el-menu-vertical-demo .el-submenu{
    background-color:rgb(57,61,73) !important;
  }

  #mainContainer #aside .el-menu-vertical-demo .el-menu-item{
    font-size: 12px !important;
  }

  #mainContainer #aside .el-menu-vertical-demo .el-submenu .el-menu-item {
    min-width: 100%;
    font-size: 12px !important;
  }

  #mainContainer #aside .el-menu-vertical-demo .el-menu-item{
    /*padding-right: 48px;*/
    background-color:rgb(57,61,73) !important;
  }

  #mainContainer .el-main{
    line-height: 0px;
  }

  #mainContainer .el-main{
    text-align: left;
  }
</style>
